<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { message } from 'ant-design-vue'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getRevicedLog } from '#/api/revicedRecord'

const data = ref<any>({})

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/5',
  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>()
    }
  },
})

interface RowType {
  created_at: string
  realname: string
  action_num: number
  gift_num: number
  total_num: number
  price: number
  total_price: number
  warehouse_name: string
  images: string[]
}

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'created_at', title: '时间', width: 150 },
    { field: 'material_name', title: '物料', width: 80 },
    { field: 'realname', title: '操作人', width: 80 },
    { field: 'action_num', title: '收费数量', width: 100 },
    { field: 'gift_num', title: '赠送', width: 70 },
    { field: 'total_num', title: '总数', width: 100 },
    { field: 'refund_num', title: '退料', width: 60 },
    { field: 'price', title: '单价', width: 70 },
    { field: 'total_price', title: '总价', width: 100 },
    { field: 'warehouse_name', title: '所属仓库', width: 100 },
    { field: 'images', title: '凭证', width: 100 },
    { field: 'remark', title: '备注',  },
  ],
  exportConfig: {},
  height: '380px',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await getRevicedLog({
          record_id: data.value.info.record_id,
        })
        return res.list
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'created_at', order: 'desc' },
    remote: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})
</script>

<template>
  <Modal title="收料记录">
    <Grid />
  </Modal>
</template>